
<template>
  <div>
    <div class="tuwen_box">
      <div>
        <el-button size="small" type="primary" @click="addItem">新增</el-button>
      </div>
      <div class="flex-align">
        <div>模块阴影</div>
        <el-select
        style="margin-left:10px;"
          v-model="active_component.propValue.boxShadow"
          placeholder="请选择"
        >
          <el-option label="默认显示" value="1"> </el-option>
          <el-option label="默认不显示" value="2"> </el-option>
          <el-option label="触摸/点击显示" value="3"> </el-option>
        </el-select>
      </div>
      <el-table :data="active_component.propValue.list" style="width: 100%">
        <el-table-column prop="icon" label="图片" width="120px">
          <template slot-scope="scope">
            <div>
              <img :src="scope.row.icon" style="width: 30px" alt="" />
              <Upload
                :text="'上传图片'"
                @confrim="
                  (e) => {
                    confrim(e, scope.$index);
                  }
                "
                :type="'primary'"
              ></Upload>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="link" label="链接">
          <template slot-scope="scope">
            <el-input v-model="scope.row.link"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="标题">
          <template slot-scope="scope">
            <el-input v-model="scope.row.title"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="content" label="文本内容">
          <template slot-scope="scope">
            <el-input v-model="scope.row.content"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="content" label="操作">
          <template slot-scope="scope">
            <div>
              <el-button
                size="small"
                type="danger"
                @click="deleteItem(scope.$index)"
                >删除</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="flex-center" style="margin-top: 10px">
      <el-button size="small" type="" @click="closeTK">取消</el-button>
      <el-button size="small" type="primary" @click="pushcanvas"
        >确定</el-button
      >
    </div>
  </div>
</template>

<script>
import Upload from "../Upload/index.vue";
export default {
  props: ["componentId", "componentList", "activeCompont"],
  components: { Upload },
  data() {
    return {
      name: "",
      tabIndex: 0,
      active_component: {},
    };
  },

  created() {
    if (this.activeCompont) {
      this.active_component = this.activeCompont;
    } else {
      for (let key in this.componentList) {
        if (
          this.componentList[key].isDialog &&
          this.componentList[key].propValue.value == this.componentId
        ) {
          this.active_component = JSON.parse(
            JSON.stringify(this.componentList[key])
          );
        }
      }
    }
  },

  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
    },
    addItem() {
      this.active_component.propValue.list.push({
        title: "卡片标题",
        icon: "",
        content: `卡片描述`,
        link: "",
      });
    },
    deleteItem(i) {
      this.active_component.propValue.list.splice(i, 1);
    },
    loadSuccess(res) {
      this.active_component.propValue.img = res.data;
    },
    confrim(e, i) {
      this.active_component.propValue.list[i].icon = e;
    },
    closeTK() {
      this.$emit("closeTK");
    },
    changetab(i) {
      this.active_component.propValue.tabIndex = i;
    },
    pushcanvas() {
      if (this.activeCompont) {
        //  this.$store.commit('setComponentData',this.$store.state.componentData)
        this.$emit("closeTK"); //关闭弹框
      } else {
        let canvasStyle = this.$store.state.canvasStyleData;
        let component = this.active_component;
        component.style.top = Number(canvasStyle.height);
        component.style.left = 0;

        if (this.$route.query.type == 2) {
          component.propValue.imgwidth = 160;
          component.propValue.imgheight = 140;
          component.propValue.contentwidth = 160;
          component.propValue.contentheight = 180;
          component.propValue.boxMargin = 13;
          component.propValue.flex = "flex";
        }

        this.$store.commit("addComponent", { component: component });
        canvasStyle.height = String(
          Number(canvasStyle.height) + Number(component.style.height)
        );
        this.$store.commit("setCanvasStyle", canvasStyle);
        this.$emit("closeTK"); //关闭弹框
      }

      //     }
      //   }
    },
  },
};
</script>




